<template>
  <div>
    <div class="search">
      <input
        class="input"
        type="text"
        placeholder="搜索你想要的的商品"
        placeholder-style="color:#cccccc"
        v-model="filterVal"
      />
      <icon
        @click="handleSearch"
        class="searchClick"
        type="search"
        size="20"
        color="#cccccc"
      />
    </div>
    <div class="list">
      <i-tabs :current="isShelf" color="#6692f7" @change="handleTabChange">
        <i-tab key="1" title="已上架"></i-tab>
        <i-tab key="0" title="已下架"></i-tab>
      </i-tabs>
      <scroll-view
        class="scroll-wrap no-scroll-bar"
        style="height:calc(100% - 42px)"
        scroll-y
        @scrolltolower="handleLoadMore"
      >
        <div v-for="(item,idx) in list" :key="idx" class="goods-block">
          <img :src="item.goodsImg" mode="aspectFit" class="preview" />
          <div class="goods-info">
            <p class="goods-name ellipsis">{{item.goodsName}}</p>
            <p class="goods-stock">规格: {{item.specification}}</p>

            <p class="goods-price" v-if="item.goodsKind !== 'INTEGRAL'">
              <span class="discount">{{item.goodsDiscount}}</span>
              <!-- <span class="amount">原价: {{item.goodsAmount}}</span> -->
            </p>
            <p class="goods-price" v-else>
              <span class="discount">{{item.goodsCost}}</span>
              <span class="icon">积分商品</span>
            </p>
            <!-- <p class="goods-stock">库存: {{item.goodsStock}}</p> -->
            <p class="goods-stock">评价数: {{item.evaluateNum}}</p>
          </div>
          <div class="edit-block">
            <!-- <span
              class="tag"
              :class="{danger:isShelf==='0'}"
            >{{isShelf==='1'?'已上架':'已下架'}}</span>-->
            <!-- <img
              class="tagImg"
              :src="isShelf==='1'?'https://akk.028wkf.cn/kdb-weapp-img/icon/ysj.png':'https://akk.028wkf.cn/kdb-weapp-img/icon/yxj.png'"
            />-->
            <button
              :class="isShelf === '1' ? 'edit-btn' : 'edit-btn2'"
              size="mini"
              @click="handleEditGoods(item)"
            >查看详情</button>
          </div>
        </div>
        <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import {
  FIND_SHOP_GOODS_PAGE,
  FIND_SHOP_GOODS_SPECIFICATION_LIST,
  ASSESS_FIND_PAGE
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      filterVal: '',
      goodsList: [],
      currentPage: 1,
      alreadyLastPage: false,
      isShelf: '1',
      putawayName: `上架商品`,
      soldOutName: `下架商品`
    }
  },
  computed: {
    list () {
      return this.goodsList.map(_ => ({
        goodsAmount: '￥' + (_.goodsAmount * 1).toFixed(2),
        goodsDiscount: '￥' + (_.goodsDiscount * 1).toFixed(2),
        goodsName: _.goodsName,
        goodsNo: _.goodsNo,
        goodsStock: _.goodsStock,
        goodsImg: _.goodsImg,
        goodsKind: _.goodsKind,
        goodsCost: '￥' + (_.goodsCost * 1).toFixed(2),
        specification: _.specification,
        evaluateNum: _.evaluateNum
      }))
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onReady () {},
  onLoad () {},
  onShow () {
    this.$cookie.remove('describe-img1')
    this.$cookie.remove('describe-img2')
    this.goodsList = []
    this.currentPage = 1
    this.getGoodsList()
  },
  methods: {
    handleSearch () {
      this.currentPage = 1
      this.getGoodsList()
    },
    handleTabChange (e) {
      let key = e.target.key
      this.isShelf = key

      this.currentPage = 1
      this.getGoodsList()
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.getGoodsList()
      }
    },
    handleEditGoods (goods) {
      this.$router.push(
        '/pages/shop-management/evaluate-list/main?goodsNo=' + goods.goodsNo
      )
    },

    getGoodsList () {
      const vm = this

      let params = {
        shopId: vm.$store.state.account.shopId,
        isShelf: vm.isShelf
      }

      if (vm.filterVal) {
        if (/^\d*$/.test(vm.filterVal) && vm.filterVal.length === 18) {
          params.goodsNo = vm.filterVal
        } else {
          params.goodsName = vm.filterVal
        }
      }

      FIND_SHOP_GOODS_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            // list.forEach(_ => {
            //   FIND_SHOP_GOODS_SPECIFICATION_LIST(_.goodsNo)
            //     .then(r => {
            //       if (r.data.code === '0') {
            //         let listM = r.data.data
            //         if (listM.length) {
            //           _.specification = listM[0].goodsSpecName
            //         } else {
            //           _.specification = '无规格'
            //         }
            //       } else {
            //         vm.$toast(r.data.message)
            //       }
            //     })
            //     .catch(e => {
            //       console.error(e)
            //     })
            //   ASSESS_FIND_PAGE(_.goodsNo, 1, 10)
            //     .then(r => {
            //       if (r.data.code === '0') {
            //         _.evaluateNum = r.data.data.total
            //       } else {
            //         vm.$toast(r.data.message)
            //       }
            //     })
            //     .catch(e => {
            //       console.error(e)
            //     })
            // })
            vm.printList(list, isFirstPage, isLastPage)
            if (vm.isShelf === '1') {
              vm.putawayName = `上架商品(${r.data.data.total})`
            } else {
              vm.soldOutName = `下架商品(${r.data.data.total})`
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this
      list.forEach(_ => {
        FIND_SHOP_GOODS_SPECIFICATION_LIST(_.goodsNo)
          .then(r => {
            if (r.data.code === '0') {
              let listM = r.data.data
              if (listM.length) {
                _.specification = listM[0].goodsSpecName
              } else {
                _.specification = '无规格'
              }
            } else {
              vm.$toast(r.data.message)
            }
          })
          .catch(e => {
            console.error(e)
          })
        ASSESS_FIND_PAGE(_.goodsNo, 1, 10)
          .then(r => {
            if (r.data.code === '0') {
              _.evaluateNum = r.data.data.total
            } else {
              vm.$toast(r.data.message)
            }
          })
          .catch(e => {
            console.error(e)
          })
      })
      if (isFirst) {
        this.goodsList = list
        if (isLast || !list.length) {
          // only one page
          this.alreadyLastPage = true
        } else {
          // has next page
          this.alreadyLastPage = false
          this.currentPage += 1
        }
      } else if (isLast) {
        // more than one page and this is the last page
        this.goodsList.push(...list)
        this.alreadyLastPage = true
      } else {
        // middle page
        this.goodsList.push(...list)
        this.alreadyLastPage = false
        this.currentPage += 1
      }
    },
    getGoodsOutNum () {
      const vm = this
      let params = {
        shopId: vm.$store.state.account.shopId,
        isShelf: '0'
      }
      if (vm.filterVal) {
        if (/^\d*$/.test(vm.filterVal) && vm.filterVal.length === 18) {
          params.goodsNo = vm.filterVal
        } else {
          params.goodsName = vm.filterVal
        }
      }
      FIND_SHOP_GOODS_PAGE(params, 1, 10)
        .then(r => {
          if (r.data.code === '0') {
            vm.soldOutName = `下架商品(${r.data.data.total})`
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  position: relative;
  .input {
    width: 70%;
    height: 30px;
    padding-left: 10px;
    font-size: 14px;
    color: #cccccc;
    border: 1px solid #cccccc;
    border-radius: 25px;
  }
  .searchClick {
    position: absolute;
    right: 60px;
    z-index: 5;
  }
}
.list {
  height: calc(100% - 110px);
  > .scroll-wrap {
    .goods-block {
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      margin: 0 10px 10px;
      box-shadow: 0 0 8px lighten($blue, 20%);
      height: 80px;
      position: relative;
      overflow: hidden;
      transform: translateY(10px);
      > .preview {
        width: 48px;
        height: 48px;
      }
      > .goods-info {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 14px;
        width: calc(100% - 150px);
        > .goods-price {
          > .discount {
            display: inline-block;
            color: $red;
            min-width: 50px;
            padding-right: 10px;
          }
          > .amount {
            color: $gray;
          }
          > .icon {
            border-radius: 4px;
            border: 1px solid #5d93fd;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            padding: 2px 3px;
          }
        }
      }
      > .edit-block {
        align-self: flex-start;
        > .tag {
          font-size: 10px;
          color: $white;
          background-color: $blue;
          position: absolute;
          top: -5px;
          right: -35px;
          padding: 15px 30px 2px;
          transform: rotate(45deg);
          &.danger {
            background-color: $red;
          }
        }
        > .tagImg {
          width: 38px;
          height: 38px;
          background: #fff;
          position: absolute;
          top: 0;
          right: 0;
        }
        > .edit-btn {
          width: 70px;
          display: block;
          color: $white;
          font-size: 10px;
          background-color: $blue;
          padding: 0;
          height: 20px;
          line-height: 20px;
          border-radius: 20px;
          transform: translateY(5px);
        }
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
</style>
